---
title: 'iCalendar plugin'
description: 'Plugin for importing events from an iCalendar source.'
---

# iCalendar plugin

This plugin allows you to import events from an iCalendar source.

import {Callout} from "nextra/components";

<Callout type="info">
  This plugin assumes UTC timezone for all events. You will probably want to skip configuring a timezone for the calendar when using it. Reason for this is, that the ical plugin was first removed for v3 in order to lower migration effort, but then added again in order to help users migrate from v2.

  If you need to use different timezones for your ical events, feel free to open a PR that utilitzes the timezone features of [ical.js](https://github.com/kewisch/ical.js), the library with which Schedule-X is parsing ical events.
</Callout>

## Installation

```bash
npm install @schedule-x/ical
```

## Usage

```js
import { createIcalendarPlugin } from '@schedule-x/ical'

const icalendarPlugin = createIcalendarPlugin({
  data: 'BEGIN:VCALENDAR\n' +
    'VERSION:2.0\n' +
    'CALSCALE:GREGORIAN\n' +
    'BEGIN:VEVENT\n' +
    'SUMMARY:Good morning\n' +
    'DTSTART;TZID=America/New_York:20240801T103400\n' +
    'DTEND;TZID=America/New_York:20240801T110400\n' +
    'LOCATION:1000 Broadway Ave.\\, Brooklyn\n' +
    'DESCRIPTION: Access-A-Ride trip to 900 Jay St.\\, Brooklyn\n' +
    'STATUS:CONFIRMED\n' +
    'SEQUENCE:3\n' +
    'END:VEVENT\n' +
    'BEGIN:VEVENT\n' +
    'RRULE:FREQ=DAILY;COUNT=3\n' +
    'SUMMARY:Good night\n' +
    'DTSTART;TZID=America/New_York:20240902T200000\n' +
    'DTEND;TZID=America/New_York:20240902T203000\n' +
    'LOCATION:900 Jay St.\\, Brooklyn\n' +
    'DESCRIPTION: Access-A-Ride trip to 1000 Broadway Ave.\\, Brooklyn\n' +
    'STATUS:CONFIRMED\n' +
    'SEQUENCE:3\n' +
    'END:VEVENT\n' +
    'END:VCALENDAR',
})

const calendar = createCalendar({
  // other config...
  callbacks: {
    onRangeUpdate(range) {
      console.log('rendering events for new range', range)
      icalendarPlugin.between(range.start, range.end)
    },
  },

  plugins: [icalendarPlugin]
})

calendar.render(document.getElementById('your-calendar'))
```